<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {useRouter} from "vue-router";
import {storeToRefs} from "pinia";
import {ElMessage} from "element-plus";
import {currentWorkDataInterface, paramsInterface, scheduleInterface} from "@/views/hospital/interface/interface.ts";
import useBookingStore from "@/pinia/bookingStore.ts";

const router = useRouter()
const route = useRoute()
const bookingStore = useBookingStore()
const loading = ref(false)
const {bookInfo, currentWorkData, moringScheduleList, afterScheduleList} = storeToRefs(bookingStore)

const params = reactive<paramsInterface>({
  page: 1,
  limit: 6,
  hoscode: '',
  depcode: ''
})

const scheduleParams = reactive<scheduleInterface>({
  hoscode: '',
  depcode: '',
  workDate: ''
})

const current = ref<currentWorkDataInterface>({
  availableNumber: 0,
  dayOfWeek: '',
  docCount: 0,
  reservedNumber: 0,
  status: 0,
  workDate: '',
  workDateMd: ''
})

const fetchWork = async () => {
  loading.value=true
  try {
    params.depcode = route.query.depcode as string
    params.hoscode = route.query.hoscode as string
    await bookingStore.fetchBookInfo(params)
    await fetchScheduleList(currentWorkData.value)
  } catch (error) {
    ElMessage.warning(error.message as string)
  } finally {
    loading.value=false
  }
}

const fetchScheduleList = async (currentWorkData: currentWorkDataInterface) => {
  try {
    scheduleParams.hoscode = route.query.hoscode as string
    scheduleParams.depcode = route.query.depcode as string
    scheduleParams.workDate = currentWorkData.workDate
    await bookingStore.fetchScheduleList(scheduleParams)
  } catch (error) {
    ElMessage.warning(error.message)
  } finally {
    loading.value = false
  }
}

const handleFilterDate = async (currentWorkData: currentWorkDataInterface) => {
  loading.value = true
  current.value = currentWorkData
  try {
    await fetchScheduleList(currentWorkData)
  } catch (error) {
    ElMessage.warning(error.message)
  } finally {
    loading.value = false
  }
}
const handleSizeChange = (size: number) => {
  params.limit = size
  fetchWork()
}
const handleCurrentChange = (page: number) => {
  params.page = page
  fetchWork()
}

const handleClick = (item) => {
  router.push({path: '/hospital/client', query: {doctorId: item.id, hoscode: route.query.hoscode, depcode: route.query.depcode}})
}
onMounted(() => {
  fetchWork()
})
</script>

<template>
  <div class="booking" v-loading="loading" element-loading-text="数据加载中" element-loading-background="rgb(255, 255, 255)">
    <div class="conta">
      <div class="top">
        <span class="hosname">{{ bookInfo.baseMap?.hosname }} | </span>
        <span class="">{{ bookInfo.baseMap?.bigname }} | </span>
        <span class="hosdept">{{ bookInfo.baseMap?.depname }}</span>
      </div>
      <div class="center">
        <h1 class="time"> {{ bookInfo.baseMap?.workDateString }}</h1>
        <div class="container">
          <el-card :class="item.status===-1||item.availableNumber===-1?'none':'item'" v-for="(item,index) in bookInfo.bookingScheduleList" @click="handleFilterDate(item)">
            <template #header>
              <span class="header">{{ item.workDate }} {{ item.dayOfWeek }}</span>
            </template>
            <div class="bottom">
              <span v-if="item.status===-1">停止挂号</span>
              <span v-if="item.status===0">{{ item.availableNumber === -1 ? '预约已满' : `有号(${item.availableNumber})` }}</span>
              <span v-if="item.status===1">即将放号</span>
              <span></span>
            </div>
          </el-card>
        </div>
      </div>
      <div class="bottom-hos">
        <el-card class="time" shadow="never" v-if="current.status===1">2023年12月3日08:30放号</el-card>
        <div class="doctor" v-else>
          <div class="moring">
            <div class="tip-con">
              <el-card style="width: 100%; background-color: #7f7f7f;" shadow="never">
                <span class="tip iconfont icon-shangwu"></span>
                <span class="text">上午号源</span>
              </el-card>
            </div>
            <el-card class="info" shadow="never" v-for="(item,index) in moringScheduleList" :key="index">
              <div class="left">
                <div class="hos">
                  <span>{{ item.title }}</span>
                  <span> | </span>
                  <span> {{ item.docname || '未知姓名' }} </span>
                </div>
                <div class="skill">
                  {{ item.skill }}
                </div>
              </div>
              <div class="right">
                <span class="money">￥{{ item.amount }}</span>
                <el-button type="primary" @click="handleClick(item)">剩余({{ item.availableNumber }})</el-button>
              </div>
            </el-card>
          </div>
          <div class="after moring" v-if="afterScheduleList.length">
            <div class="tip-con">
              <el-card style="width: 100%; background-color: #7f7f7f;" shadow="never">
                <span class="tip iconfont icon-shangwu"></span>
                <span class="text">下午号源</span>
              </el-card>
            </div>
            <el-card class="info" shadow="never" v-for="(item,index) in afterScheduleList">
              <div class="left">
                <div class="hos">
                  <span>{{ item.title }}</span>
                  <span> | </span>
                  <span> {{ item.docname || '未知姓名' }} </span>
                </div>
                <div class="skill">
                  {{ item.skill }}
                </div>
              </div>
              <div class="right">
                <span class="money">￥{{ item.amount }}</span>
                <el-button type="primary" @click="handleClick(item)">剩余({{ item.availableNumber }})</el-button>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
        v-model:current-page="params.page"
        v-model:page-size="params.limit"
        :page-sizes="[6, 12, 18, 24]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(bookInfo.total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<style scoped lang="scss">
.booking {
  padding-top: 30px;
  padding-left: 30px;

  .active {
    transform: translateY(-5px);
    border: 2px solid #4490f1;
  }

  .conta {
    min-height: 1000px;
  }

  .top {
    color: #7f7f7f;

    span {
      margin: 0 2px;
      height: 16px;
      font-size: 15px;
    }
  }

  .center {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    h1 {
      font-weight: 600;
      font-size: 15px;
      color: #7f7f7f;
    }

    .container {
      width: 100%;
      display: flex;
      margin: 30px 0;
      font-size: 14px;

      .header {
        font-size: 12px;
      }

      .item {
        cursor: pointer;
        flex: 1;
        margin: 0 10px;
        transition: all 1s linear;

        &:hover {
          transform: translateY(-5px);
        }


        .bottom {
          width: 100%;
          height: 60px;
          line-height: 60px;
          text-align: center;
        }

      }

      .none {
        cursor: pointer;
        flex: 1;
        margin: 0 10px;
        transition: all 1s linear;

        &:hover {
          transform: translateY(-5px);
        }


        .bottom {
          width: 100%;
          height: 60px;
          line-height: 60px;
          text-align: center;
          color: #cccccc;
        }
      }
    }
  }

  .bottom-hos {
    margin: 20px 0;
    text-align: center;

    .time {
      font-size: 18px;
      font-weight: 900;
      color: #409eff;
    }

    .doctor {
      .moring {
        margin-top: 10px;

        .tip-con {
          display: flex;

          .text, .tip {
            color: #ffffff;
            font-weight: 900;
          }
        }

        .info {
          margin-top: 10px;

          :deep(.el-card__body) {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
              .hos {
                display: flex;
                color: #409eff;

                span {
                  margin: 0 2px;
                  font-weight: 900;
                }
              }

              .skill {
                color: #7f7f7f;
                font-size: 12px;
                font-weight: 900;
              }

              div {
                margin: 20px 0;
              }
            }

            .right {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 200px;

              .money {
                color: #7f7f7f;
                font-weight: 900;
              }
            }
          }
        }
      }
    }
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
</style>
